<script type="text/javascript" src="{{ STATIC_PREFIX }}js/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="{{ STATIC_PREFIX }}js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script>
    $(function() {
        $('#startPicker,#endPicker').datepick({
                    onSelect: customRange, dateFormat: 'yyyy-mm-dd'});

        function customRange(dates) {
            if (this.id == 'startPicker') {
                $('#endPicker').datepick('option', 'minDate', dates[0] || null);
            }
            else {
                $('#startPicker').datepick('option', 'maxDate', dates[0] || null);
            }
        }
    });
</script>
<article class="module width_full">
    <header>
        <h3>图表</h3>
    </header>
    <div>
        <form accept="" method="get">
            <p>
            <input type="text" id="startPicker" name="startPicker" size="10">to
            <input type="text" id="endPicker" name='endPicker' size="10">
            <input type="submit" value="查询">
        </p>
        </form>
    </div>
    <div class="module_content">
        <article class="stats_graph">
            <div id="chart_line"></div>
            <script type="text/javascript">
                $.jqplot.config.enablePlugins = true;
                pv = {{ pv_list }};
                uv = {{ uv_list }};
                ip = {{ ip_list }};
                plot = $.jqplot('chart_line', [pv,uv,ip], {
                            title:'',
                            legend:{show:true},
                            series:[
                                {label:'PV'},
                                {label:'UV'},
                                {label:'IP'}
                            ],
                            axes:{
                                xaxis:{
                                    autoscale:true,
                                    renderer:$.jqplot.CategoryAxisRenderer,
                                    ticks:{% autoescape off %}{{ dt }}{% endautoescape %}
                                },
                                yaxis:{min:0,autoscale:true}
                            }
                        });
            </script>

        </article>
        <div class="clearfix"></div>
    </div>
</article>